import React, { useEffect, useState } from 'react'

import { Layout, Menu, Row, Col, Button, Input } from 'antd';

import './index.less'
import AjaxUtil from '../../commons/axios/index'
import ServiceInfo from './serviceInfo/service'
import RequestData from './requestData/requestData'
import AnalysisCharts from './analysisCharts'

const { SubMenu } = Menu;
const { Content, Sider } = Layout;

const Service = props => {

    const [ treeMenu, setTreeMenu ] = useState([])

    const [ id, setId ] = useState(null)

    useEffect(() => {
        // let url = '/manager/model/services'
        // AjaxUtil.ajax({
        //     url: url,
        //     data: {
        //         isShowLoading: true
        //     },
        //     method: 'get'
        // }).then(res => {
        //     if (res.code === 0) {
        //         const services = renderMenu(res.result.data)
        //         setTreeMenu(services)
        //     }
        // })
    }, [])

    /**
     * 渲染右侧菜单
     * @param {*} data 
     * @returns 返回树结构菜单
     */
    function renderMenu(data) {
        return data.map( item => {
            if(item.subMenu) {
                return (
                    <SubMenu key={item.id} title={item.name}>
                        { renderMenu(item.subMenu) }
                    </SubMenu>
                )
            }
            return <Menu.Item key={item.id}  >
                        { item.name }
                   </Menu.Item>
        })
    }

    /**
     * 点击菜单时的触发函数
     * @param {} value 
     */
    const clickFunc = value => {
        setId(value.key)
    }

    /**
     * 打开新建服务目录的弹窗
     */
    function handleNewItem() {

    }

    function renderContext (id) {
        if (id === null) {
            return (
                <div className="context-new-button">
                    <Button 
                        type="primary" 
                        size={'large'}
                        onClick={handleNewItem}
                    >
                        新建服务目录
                    </Button>
                </div>
            )
        }
        return (
                <Row justify="space-around">
                    <Col span={7}>
                        <div style={{height: 'calc(90vh)'}}>
                            <ServiceInfo id={id} />
                        </div>
                    </Col>
                    <Col span={7}>
                        <div style={{height: 'calc(90vh)'}}>
                            <RequestData id={id} />
                        </div>
                    </Col>
                    <Col span={10}>
                        <div style={{height: 'calc(90vh)'}}>
                            <AnalysisCharts id={id} />
                        </div>
                    </Col>
                </Row>
        )
    }

    return (
        <Layout>
            <Sider width={200}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: 'calc(88vh)', overflow: 'scroll' }}
                    onClick={clickFunc}
                >
                    { treeMenu }
                    <div className='sider-input'>
                        <Input />
                        <Button type="primary" >新建</Button>
                    </div>
                </Menu>
            </Sider>
            <Content>
                { renderContext(id) }
            </Content>
        </Layout>
    )
}

export default Service